import { Canvas, CircleMarker, LatLng, Map } from 'leaflet';

const defaultImgOptions = {
    rotate: 0,
    size: [40, 40],
    offset: { x: 0, y: 0 },
};

const angleCrds = (map: Map, prevLatlng: LatLng, latlng: LatLng) => {
    if (!latlng || !prevLatlng) return 0;
    const pxStart = map.project(prevLatlng);
    const pxEnd = map.project(latlng);
    return (Math.atan2(pxStart.y - pxEnd.y, pxStart.x - pxEnd.x) / Math.PI) * 180 - 90;
};

Canvas.include({
    _updateImg(layer: any) {
        const { img } = layer.options;
        const p = layer._point.round();
        p.x += img.offset.x;
        p.y += img.offset.y;
        if (img.rotate) {
            this._ctx.save();
            this._ctx.translate(p.x, p.y);
            this._ctx.rotate((img.rotate * Math.PI) / 180);
            this._ctx.drawImage(img.el, -img.size[0] / 2, -img.size[1] / 2, img.size[0], img.size[1]);
            this._ctx.restore();
        } else {
            this._ctx.drawImage(
                img.el,
                p.x - img.size[0] / 2,
                p.y - img.size[1] / 2,
                img.size[0],
                img.size[1],
            );
        }
    },
});

class LeafletCanvasMarker extends CircleMarker {
    options: any;
    _renderer: any;
    _latlng: LatLng | undefined;

    constructor(latAndLng: LatLng, options: any) {
        super(latAndLng, options);
    }
    _updatePath() {
        if (!this.options.img || !this.options.img.url || !this._latlng) return;
        if (!this.options.img.el) {
            this.options.img = { ...defaultImgOptions, ...this.options.img };
            this.options.img.rotate += angleCrds(this._map, this.options.prevLatlng, this._latlng);
            const img = document.createElement('img');
            img.src = this.options.img.url;
            this.options.img.el = img;
            img.onload = () => {
                this.redraw();
            };
            img.onerror = () => {
                this.options.img = null;
            };
        } else {
            this._renderer._updateImg(this);
        }
    }
}

export default LeafletCanvasMarker;

// // 定义一个扩展函数，用于实现类的继承
// const __extends =
//     (this && this.__extends) ||
//     (function () {
//         // 定义一个函数用于设置静态属性的继承
//         let extendStatics = function (d, b) {
//             // 使用 Object.setPrototypeOf 方法设置原型链，如果不支持则使用其他替代方法
//             extendStatics =
//                 Object.setPrototypeOf ||
//                 ({ __proto__: [] } instanceof Array &&
//                     function (d, b) {
//                         d.__proto__ = b;
//                     }) ||
//                 function (d, b) {
//                     for (const p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];
//                 };
//             // 执行静态属性的继承
//             return extendStatics(d, b);
//         };
//         // 返回一个函数，用于实现类的继承
//         return function (d, b) {
//             // 如果继承的对象不是函数且不为 null ，则抛出类型错误
//             if (typeof b !== 'function' && b !== null)
//                 throw new TypeError('Class extends value' + String(b) + 'is not a constructor or null');
//             // 执行静态属性的继承
//             extendStatics(d, b);
//             // 定义一个构造函数，将当前实例的构造函数指向子类
//             function __() {
//                 this.constructor = d;
//             }
//             // 设置子类的原型对象，实现方法的继承
//             d.prototype = b === null ? Object.create(b) : ((__.prototype = b.prototype), new __());
//         };
//     })();

// // 定义一个合并对象的函数
// var __assign =
//     (this && this.__assign) ||
//     function () {
//         // 如果存在 Object.assign 方法则使用，否则使用自定义的合并函数
//         __assign =
//             Object.assign ||
//             function (t) {
//                 for (var s, i = 1, n = arguments.length; i < n; i++) {
//                     s = arguments[i];
//                     // 遍历要合并的对象的属性，将其合并到目标对象
//                     for (const p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
//                 }
//                 return t;
//             };
//         // 应用合并函数
//         return __assign.apply(this, arguments);
//     };

// // 导入 Leaflet 库中的 Canvas 和 CircleMarker 类
// import { Canvas, CircleMarker } from 'leaflet';

// // 定义默认的图片选项
// const defaultImgOptions = {
//     rotate: 0,
//     size: [40, 40],
//     offset: { x: 0, y: 0 },
// };

// // 计算角度的函数，根据地图上的两个坐标点计算角度
// const angleCrds = function (map, prevLatlng, latlng) {
//     if (!latlng || !prevLatlng) return 0;
//     // 将经纬度坐标转换为像素坐标
//     const pxStart = map.project(prevLatlng);
//     const pxEnd = map.project(latlng);
//     // 计算角度并返回
//     return (Math.atan2(pxStart.y - pxEnd.y, pxStart.x - pxEnd.x) / Math.PI) * 180 - 90;
// };

// // 为 Canvas 类添加 _updateImg 方法
// Canvas.include({
//     _updateImg: function (layer) {
//         // 获取图片相关的选项
//         const img = layer.options.img;
//         // 获取并处理图片的位置
//         const p = layer._point.round();
//         p.x += img.offset.x;
//         p.y += img.offset.y;
//         // 如果图片需要旋转
//         if (img.rotate) {
//             this._ctx.save();
//             // 进行平移和旋转操作
//             this._ctx.translate(p.x, p.y);
//             this._ctx.rotate((img.rotate * Math.PI) / 180);
//             // 绘制旋转后的图片
//             this._ctx.drawImage(img.el, -img.size[0] / 2, -img.size[1] / 2, img.size[0], img.size[1]);
//             this._ctx.restore();
//         } else {
//             // 绘制未旋转的图片
//             this._ctx.drawImage(
//                 img.el,
//                 p.x - img.size[0] / 2,
//                 p.y - img.size[1] / 2,
//                 img.size[0],
//                 img.size[1]
//             );
//         }
//     },
// });

// // 定义 LeafletCanvasMarker 类，继承自 CircleMarker 类
// const LeafletCanvasMarker = /** @class */ (function (_super) {
//     __extends(Canvasmarker, _super);
//     // 构造函数，调用父类构造函数并进行一些操作
//     function Canvasmarker(latAndLng, options) {
//         const _this = _super.call(this, latAndLng, options) || this;
//         return _this;
//     }
//     // 重写 _updatePath 方法
//     Canvasmarker.prototype._updatePath = function () {
//         const _this = this;
//         // 如果缺少必要的图片信息或坐标信息，则返回
//         if (!this.options.img || !this.options.img.url || !this._latlng) return;
//         // 如果还未加载图片元素
//         if (!this.options.img.el) {
//             // 合并默认图片选项和当前的图片选项
//             this.options.img = __assign(__assign({}, defaultImgOptions), this.options.img);
//             // 更新图片的旋转角度
//             this.options.img.rotate += angleCrds(this._map, this.options.prevLatlng, this._latlng);
//             // 创建图片元素
//             const img = document.createElement('img');
//             img.src = this.options.img.url;
//             this.options.img.el = img;
//             // 图片加载成功和加载失败的处理
//             img.onload = function () {
//                 _this.redraw();
//             };
//             img.onerror = function () {
//                 _this.options.img = null;
//             };
//         } else {
//             this._renderer._updateImg(this);
//         }
//     };
//     return Canvasmarker;
// })(CircleMarker);

// export default LeafletCanvasMarker;
